<template>
    <div>
        <div style="width: auto;height: 400px" ref="main3"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts5';
    export default {
        name: "Pie",
        props:{
            inewsData:Array
        },
        data() {
            return {
                // data:[]

                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
            }
        }, //图表实例
        mounted() {
            this.echartsInit()
        },
        created() {
            this.data = this.inewsData
        },
        methods: {


            echartsInit() {
                var newColor = []
                var newNum = 1
                let num = 1/this.data.length
                this.data.map(m => {
                    console.log(m)
                    newColor.push(`rgba(206, 9, 241,${newNum})`)
                    newNum = newNum - num

                })

                // let ydata = this.hotKeyWordList;
                // var _this = this;
                echarts.init(this.$refs.main3).setOption({
                    title: {
                        text: 'Referer of a Website',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    color:newColor,
                    toolbox: {
                        show: true,
                        right: '15',
                        top: '-5',
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: [ 'bar','pie'] },
                            restore: { show: true },
                            saveAsImage: { iconStyle: {
                                    borderColor: "#666"
                                },
                                emphasis: {
                                    iconStyle: {
                                        borderColor: "#666",
                                        textFill: "#666"
                                    },
                                } }
                        }
                    },
                    tooltip: {
                        show: true,
                        formatter: '{b0}: {c0}',
                        // formatter: '{b0}: {c0}' + _this.$t('ovArticle'),
                        textStyle:{
                            align:'left'
                        },
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: this.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0,0,0,0.5)'
                                }
                            }
                        }
                    ]
                })
            },
        }
    }
</script>

<style scoped>
    *{
        color: rgba(206, 9, 241, 0.9);
    }
</style>
